<template>
  <div class="container">
    <div class="login_box" v-show="showLoginBox">
      <h2>CRM SYSTEM</h2>
      <el-form
        ref="loginFormRef"
        :label-position="labelPosition"
        label-width="65px"
        :model="loginForm"
        :rules="loginRules"
      >
        <el-form-item label="工号" prop="id">
          <el-input
            v-model="loginForm.id"
            placeholder="请输入员工工号"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input
            v-model="loginForm.code"
            placeholder="请输入验证码"
          ></el-input>
          <div id="imgCode"></div>
        </el-form-item>
      </el-form>
      <div class="loginBtn">
        <el-button
          type="primary"
          @click="login()"
          v-loading.fullscreen.lock="fullscreenLoading"
          >登录</el-button
        >
        <el-button type="info" @click="closeLBox(btnInfo)">{{
          btnInfo
        }}</el-button>
      </div>
    </div>
    <div class="nav">
      <span @click="showLBox">{{ isLogin }}.</span>
    </div>
    <div class="con">
      <h2 class="title" ref="title">
        <span>fast</span><span>clear</span><span>concise</span>
        CRM SYSTEM
      </h2>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import anime from "animejs";

export default {
  name: "login",
  data() {
    return {
      // 全局遮罩
      fullscreenLoading: 0,
      showLoginBox: 0,
      gVerify: "",
      isLogin: "login",
      labelPosition: "left",
      loginForm: {
        id: "001",
        password: "123456",
        code: "",
      },
      loginRules: {
        id: [
          { required: true, message: "请输入账户", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        //密码是否合法
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          {
            min: 4,
            max: 4,
            message: "长度为4个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.createBlocks();
    this.animateBlocks();
    this.gVerify = new GVerify("imgCode");
  },
  methods: {
    // 展示登录窗口
    async showLBox() {
      if (this.showLoginBox == 0) {
        this.gVerify.refresh();
        setTimeout(() => {
          this.showLoginBox = 1;
          this.isLogin = "close";
        }, 500);
      } else {
        if (
          this.loginForm.username ||
          this.loginForm.password ||
          this.loginForm.code
        ) {
          const confirmResult = await this.$confirm(
            "填有数据, 是否关闭?",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          ).catch((err) => err);
          if (confirmResult != "confirm") return;
          this.resetLoginForm();
          this.showLoginBox = 0;
          this.isLogin = "login";
        }
        this.resetLoginForm();
        this.showLoginBox = 0;
        this.isLogin = "login";
      }
    },
    // 动画
    animateBlocks() {
      anime({
        targets: ".block",
        translateX: function () {
          return anime.random(-300, 300);
        },
        translateY: function () {
          return anime.random(-100, 100);
        },
        scale: function () {
          return anime.random(1, 5);
        },
        easing: "linear",
        duration: 3000,
        delay: anime.stagger(10),
        complete: this.animateBlocks,
      });
    },
    // 创建方块
    createBlocks() {
      const con = document.querySelector(".con");
      for (let i = 0; i <= 10; i++) {
        const blocks = document.createElement("div");
        blocks.classList.add("block");
        con.appendChild(blocks);
      }
    },
    // 登录
    login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return;
        this.fullscreenLoading = true;
        if (this.gVerify.validate(this.loginForm.code)) {
          const { data: res } = await this.$http.post(
            "/user/login",
            qs.stringify(this.loginForm)
          );
          if (res.status !== 200) return this.$message.error(res.msg);
          sessionStorage.setItem("token", this.loginForm.id);
          this.fullscreenLoading = false;
          this.$message({
            message: res.msg,
            type: "success",
            duration: 800,
          });
          setTimeout(() => {
            this.$router.push("/home");
          }, 1000);
        } else {
          this.fullscreenLoading = false;
          return this.$message.error("验证码错误");
        }
      });
    },
    // 重置
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields();
    },
    //关闭登录窗口
    async closeLBox(value) {
      if (value == "关闭") this.showLBox();
      else if (value == "重置") {
        const confirmResult = await this.$confirm(
          "是否重置, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).catch((err) => err);
        if (confirmResult != "confirm") return;
        this.resetLoginForm();
      }
    },
  },
  computed: {
    btnInfo() {
      return this.loginForm.username ||
        this.loginForm.password ||
        this.loginForm.code
        ? "重置"
        : "关闭";
    },
  },
};
</script>

<style scoped>
.nav {
  position: fixed;
  top: 70px;
  width: 100%;
  height: 5%;
  z-index: 10000;
}
.nav span {
  position: absolute;
  right: 100px;
  font-size: 25px;
  letter-spacing: 1px;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  transition: all 0.5s;
}
.nav span:hover {
  cursor: pointer;
}
.login_box {
  position: fixed;
  width: 400px;
  height: 420px;
  z-index: 1000;
  border-radius: 10px;
  background-color: #bcbcbcdf;
  z-index: 100;
  padding: 0 50px;
}
.login_box h2 {
  display: block;
  text-align: center;
  padding-top: 50px;
  color: rgba(222, 222, 222);
  text-shadow: 1px 1px 8px rgb(112, 112, 112);
  font-size: 30px;
  font-weight: 900;
  padding-bottom: 10px;
  border-bottom: 2px solid rgb(162, 162, 162);
}
.container {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #aaaaaa;
}
.con {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title {
  transition: all 1s;
  position: relative;
  right: 300px;
  top: 150px;
  color: rgba(222, 222, 222, 0.815);
  text-align: left;
  font-size: 80px;
  z-index: 1;
  font-weight: 900;
}
.title span {
  height: 50px;
  display: block;
  font-size: 60px;
  letter-spacing: 1px;
  font-weight: 900;
  text-transform: uppercase;
  transform: translateX(5px);
}
.title span:nth-child(1) {
  height: 45px;
  font-size: 50px;
  color: #bd2a2a;
  opacity: 0.7;
  transform: translateX(9px);
}
.title span:nth-child(2) {
  height: 40px;
  font-size: 45px;
}
.title span:nth-child(3) {
  height: 40px;
  font-size: 55px;
  color: #bd2a2a;
  opacity: 0.7;
}
.el-form {
  margin-top: 30px;
}
.el-form .el-form-item:nth-child(3) .el-input {
  contain: content;
  width: 120px;
  height: 40px;
}
#imgCode {
  height: 38px;
  display: inline;
  margin-left: 15px;
}
.loginBtn {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-content: center;
}
.el-button {
  width: 120px;
}
</style>
